<script setup lang="tsx">
import { watch, inject, onBeforeUnmount, ref, onMounted } from 'vue'
import { FormData } from '@/api/product/list'
import { AllUpload } from '@/components/AllUpload'
import { getListApi } from '@/api/product/classification'
import { Editor } from '@/components/Editor'
import {
  ElRadio,
  ElRadioGroup,
  ElInput,
  ElForm,
  ElFormItem,
  ElDivider,
  ElInputNumber,
  ElTreeSelect
} from 'element-plus'
import MultiSpec from '../modules/MultiSpec.vue'
const currentRow: FormData = inject('currentRow') as FormData
const formRef = ref<InstanceType<typeof ElForm>>()
const table = ref([] as string[])
const arr: any = ref([])

onMounted(() => {
  getListApidata()
})
const options = ref<Array<{ name: string; id: number }>>([])
const getListApidata = async () => {
  const res = await getListApi({ field: 'id,name,pid' })
  options.value = res.data.list
}
// 分类父id
const goods_cate_id_one = ref()
const handleNodeSelection = (_, node) => {
  const parentNodeId = node.parent ? node.parent.data.id : null
  goods_cate_id_one.value = parentNodeId
}

const submit = async () => {
  const valid = await formRef.value?.validate().catch((err) => {
    console.log(err)
  })
  if (valid) {
    currentRow.attrs = arr.value.reduce((acc, curr) => {
      acc[curr.name] = curr.keys.join(',')
      return acc
    }, {})
    currentRow.specs = table.value.map((res: any) => {
      return {
        spec_name: res.title,
        money: res.money,
        purchasing_price: res.purchasing_price,
        weight: res.weight,
        img: res.img
      }
    })
    currentRow.goods_cate_id_one = goods_cate_id_one.value
    return currentRow
  }
}

const reset = () => {
  arr.value = []
  table.value = []
  options.value = []
  Object.assign(currentRow, {})
}

watch(
  () => currentRow,
  (row) => {
    if (!row) return
  },
  {
    deep: true,
    immediate: true
  }
)

const handleRadioChange = (value: number) => {
  currentRow.spec_type = value
}

onBeforeUnmount(reset)

defineExpose({
  submit,
  reset
})
</script>

<template>
  <div>
    <ElForm ref="formRef" :model="currentRow" label-width="100px">
      <ElDivider borderStyle="none" contentPosition="left">基础信息</ElDivider>
      <div style="display: inline-block">
        <ElFormItem
          prop="name"
          label="商品名称"
          :rules="[
            {
              min: 0,
              max: 50,
              required: true,
              message: '请输入内容,最多支持50字符',
              trigger: 'blur'
            }
          ]"
        >
          <ElInput v-model="currentRow.name" placeholder="请输入内容" />
        </ElFormItem>
      </div>
      <div style="display: inline-block">
        <ElFormItem prop="goods_cate_id_two" label="商品分类" required>
          <ElTreeSelect
            v-model="currentRow.goods_cate_id_two"
            style="width: 240px"
            :data="options"
            :render-after-expand="false"
            :props="{ value: 'id', label: 'name' }"
            placeholder="请输入内容"
            @node-click="handleNodeSelection"
          />
        </ElFormItem>
      </div>
      <div style="display: inline-block">
        <ElFormItem prop="unit" label="商品单位" required>
          <ElInput v-model="currentRow.unit" placeholder="请输入内容" />
        </ElFormItem>
      </div>
      <ElFormItem prop="img" label="商品图片" required>
        <AllUpload v-model="currentRow.img" />
      </ElFormItem>
      <ElFormItem prop="shelf_life" label="保质期(天)" required>
        <ElInputNumber
          class="setUp"
          controlsPosition="right"
          v-model="currentRow.shelf_life"
          placeholder="保质期(天)"
          :min="0"
        />
      </ElFormItem>
      <ElDivider borderStyle="none" contentPosition="left">规格/库存</ElDivider>
      <ElFormItem prop="spec_type" label="规格类型" required>
        <ElRadioGroup v-model="currentRow.spec_type" @change="handleRadioChange">
          <ElRadio label="1">单规格</ElRadio>
          <ElRadio label="2">多规格</ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <div v-if="currentRow.spec_type == 1">
        <div style="display: inline-block">
          <ElFormItem prop="money" label="售价" required>
            <ElInputNumber
              class="setUp"
              controlsPosition="right"
              v-model="currentRow.money"
              placeholder="售价"
              :min="0"
              :precision="2"
            />
          </ElFormItem>
        </div>
        <div style="display: inline-block">
          <ElFormItem prop="purchasing_price" label="进价" required>
            <ElInputNumber
              class="setUp"
              controlsPosition="right"
              v-model="currentRow.purchasing_price"
              placeholder="进价"
              :min="0"
              :precision="2"
            />
          </ElFormItem>
        </div>
        <div style="display: inline-block">
          <ElFormItem prop="weight" label="商品重量">
            <ElInputNumber
              class="setUp"
              controlsPosition="right"
              v-model="currentRow.weight"
              placeholder="商品重量"
              :min="0"
            />
          </ElFormItem>
        </div>
      </div>
      <div v-if="currentRow.spec_type == 2">
        <MultiSpec ref="MultiSpec" />
      </div>
      <ElFormItem prop="descriptions" label="商品详情" required>
        <Editor v-model="currentRow.descriptions" ref="editorRef" />
      </ElFormItem>
    </ElForm>
  </div>
</template>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Specification {
  position: relative;
  width: 450px;
}

.input_icon {
  position: absolute;
  right: 0;
  z-index: 999;
}

.box-card {
  /* width: 100%; */
  margin-bottom: 20px;
}

.sku-batch {
  margin-bottom: 12px;
  line-height: 40px;
}

.title {
  margin-right: 15px;
  font-size: 13px;
  line-height: 28px;
}

.setUp {
  width: 220px;
  margin-right: 15px;
}

.setUpButton {
  margin-left: 30px;
}

.input {
  position: relative;
  height: 40px;
  margin: 5px;
}

.Specification-header {
  margin: 10px 0;
}

.icon-CircleClose {
  position: absolute;
  left: 90px;
  z-index: 999;
}

.tag {
  display: flex;
  width: 200px;
  height: 50px;
  justify-content: flex-start;
}
</style>
